define([ 'jquery',
    'underscore',
  'backbone',
  'require.dust!./programs-template',
  'overlay',
  './pubsub',
   './widgetViews',
  'jquery-ui'
], function( $, _, Backbone, template, _overlay, pubsub, WidgetViews ) {
  'use strict';

  var view = Backbone.View.extend({

    el : '#hra-programs',
    _$tabs : null,
//    _widgets : { 'i' : 'widgetIntroView', 'd' : 'widgetDayView', 'f' : 'widgetFeedbackView', 'e' : 'widgetEndView'},
//    _widgetView : null,
//    _widgetModel: null,

    initialize : function() {
       var self = this,
           programsdata = [],
           widget = null,
           widgetType = null,
//           widgetName = '',
//           widgetView = null,
//           widgetModel = null,
           widgetClass = null;
//      this.listenTo( this.model, 'change', this.render );
//      this.model.fetch().done(function() {
//        console.dir(this.model);
//      });
      this.model.fetch();
      programsdata = self.model.toJSON();
      console.dir(this.model);
      template( {'programs': programsdata}, function( err, out ){
        self.$el.append( out );
        self._$tabs = $( '#hra-programs-tabs' ).tabs({
          collapsible : true
        });
        $.each( programsdata, function( index, item ){
          //Todo: remove later when real data is ready
          if( index === 0 &&  WidgetViews[ item[ 'widgets' ][ item.currentIndex ][ 'type' ] ]  ) {
            widget = item[ 'widgets' ][ item.currentIndex ];
            widgetType = widget[ 'type' ];
            widgetClass = WidgetViews[ widgetType ];
//            widgetName =  'partner/shra/programs/src/'+self._widgets[ widgetType ];//why ./ path not work?
//            require( [widgetName], function(widgetClass) { //Todo: require at the beginning for all type of views
//              widgetModel = new Backbone.Model({
//                content : widget.content,
//                index : index
//              });
//
//              widgetView = new ( widgetClass )( { model : widgetModel } ) ;
//            });
            self._loadWidget( widgetClass, widget, index );

//            self.$el.find( '#hra-programs-tabs-' + index ).append( self.widgetView.el );
          }
        });

      });
    },

    render : function() {
      var self = this;
//          changedAttrs =  this.model.changedAttributes()    ;
      //load current widget page for each program or deffered until the tab is actived
//      console.dir(changedAttrs) ;

    },
    _loadWidget: function( widgetClass, widget, index ) {
      var widgetView = null,
        widgetModel = null;
        widgetModel = new Backbone.Model({
          content : widget.content,
          index : index
        });

      widgetView = new ( widgetClass )( { model : widgetModel } ) ;


    },
    _reload : function( index ) {
      var program = this.model.at( index ),
        widgets = program.get( 'widgets' ),
        widget = widgets[ program.get( 'currentIndex' ) ],
        widgetType = widget[ 'type' ],
        widgetClass = WidgetViews[ widgetType ];

      this._loadWidget( widgetClass, widget, index );



    },

    events : {     
     
    },


    remove: function() {
      this.$el.hide();
    }

  });

  return view;

});
